<template>
  <div class="agent">
    <div class="container">
      <div class="w">
        <!-- 搜索框-start -->
        <Search @search="getSearchText"></Search>
        <!-- 搜索框-end -->

        <!-- 服务区域选择-start -->
        <div class="area">
          <AreaSelection @getLocation="changeRegion"></AreaSelection>
        </div>
        <!-- 服务区域选择-end -->
        <!-- start -->
        <div class="clearfix">
          <!-- 经纪人列表-start -->
          <div class="agent-list fl">
            <div class="tip" v-show="initData.list.length == 0"><i class="el-icon-search"></i>很抱歉, 通过您提供的联系方式/姓名无法查询到相关经纪人，请您核实人员信息再予以查询，或者联系相关负责人哦。</div>

            <div class="agent-info clearfix" v-for="(item, index) in initData.list" :key="index">
              <div class="agent-img fl" @click="goPage(item.id)">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="info fl">
                <div class="pos-tag">
                  <div class="position">{{item.position}}</div>
                  <div class="tag3" v-if="item.tag3">{{item.tag3}}</div>
                </div>
                <div class="tit fl">
                  <div class="name" @click="goPage(item.id)">{{item.agentName}}</div>
                  <div class="area_service">
                    <span>服务片区:{{item.areaService}}</span>
                  </div>
                  <div class="his_service">
                    <span>历史成交{{item.hisService}}套，服务好评率{{item.hp}}%</span>
                  </div>
                  <div class="tags">
                    <el-tag color="#00b16a73" v-if="item.tag1">成交达人</el-tag>
                    <el-tag color="#00b16a73" v-if="item.tag2">超赞经纪人</el-tag>
                  </div>
                </div>
                <div class="rate fl">
                  <span class="fl">服务评分</span>
                  <el-rate :value="(item.major + item.serve + item.house)/3" disabled text-color="#ff9900">
                  </el-rate>
                </div>
                <div class="phone fr">
                  <i class="el-icon-phone"></i>
                  <b>{{item.phone}}</b>
                </div>
              </div>
            </div>
          </div>
          <!-- 经纪人列表-end -->

          <div class="recommend fr">
            <div class="bord">
              <p>推荐经纪人</p>
              <div class="bord2"></div>
            </div>
            <ul>
              <li class="clearfix" v-for="(item, index) in initData.rec_list" :key="index">
                <div class="img fl"><img :src='item.avatar' alt=""></div>
                <div class="re_info fl">
                  <div class="name" @click="goPage(item.id)">{{item.agentName}}</div>
                  <div class="phone">{{item.phone}}</div>
                  <div class="tag">星选经纪人</div>
                </div>
              </li>

            </ul>
          </div>
          <!-- end -->
          <!-- 分页-start -->
          <div class="pagination fl">
            <el-pagination @current-change="handleCurrentChange" :page-size="20" background layout="prev, pager, next" :total="total">
            </el-pagination>
          </div>
          <!-- 分页-end -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/components/Search";
import AreaSelection from "@/components/AreaSelection";
import "@/assets/less/agent.less";
export default {
  name: "Agent",

  components: {
    Search,
    AreaSelection
  },

  data() {
    return {
      // 区域数据
      areaData: this.$root.areaData,
      initData: {
        list: [],
        rec_list: []
      },
      // 服务区域选择情况
      areaSelect: {
        index: 0,
        isShow: false, // 显示隐藏
      },
      // 默认头像

      // 评分
      value: 5,

      params: {
        page: 1,
        size: 20,
        location: '',
        serveArea: '',
        agentName: '',
      },

      total: 0,
    };
  },

  created() {
    let isLogin = false;
    if (this.$cookies.get('__tk')) {
      isLogin = true;
    } else {
      isLogin = false;
    }
    let oj = {
      title: "经纪人",
      nav: "Agent",
      isLogin: isLogin,
    };
    this.$emit("isTitle", oj);
    // console.log(this.areaData);
    this.init();
    this.getRec()
  },

  methods: {
    init() {
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getAgent',
        params: this.params
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.initData.list = res.data.data;
          this.total = res.data.total;
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 推荐经纪人
    getRec() {
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getAgent',
        params: {
          rec: 1,
          page: 1,
          size: 5
        }
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.initData.rec_list = res.data.data;
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 跳转
    goPage(i) {
      let routeUrl = this.$router.resolve(`/agent_detail/${i}`);
      window.open(routeUrl.href, "_blank");
    },
    // 获取组件关键词
    getSearchText(t) {
      // console.log('text==>', t)
      this.params.agentName = t;
      this.params.page = 1;
      this.init();
    },
    // 点击改变区域
    changeRegion(o) {
      console.log(o)
      this.params.location = o.location == '不限' ? '' : o.location || '';
      this.params.serveArea = o.serveArea == '不限' ? '' : o.serveArea || '';
      console.log('params==>', this.params)
      this.params.page = 1;
      this.init();
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      this.init();
      this.$nextTick(() => {
        document.body.scrollTo(0, 0);
        window.scrollTo(0, 0);
        document.getElementById('index').scrollTop = 0
        window.pageYOffset = 0;
      })
    },
  },
};
</script>